<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>皇室蛋糕</title>
<link rel="shortcut icon" type="image/x-icon" href="resource/bifavi.ico" rel="external nofollow" /> 
<!-- <link rel="shortcut icon"  href="resource/bifavi.ico" type="image/x-icon" /> -->
<link rel="stylesheet" type="text/css" href="res/static/css/main.css">
<link rel="stylesheet" type="text/css" href="res/layui/css/layui.css">
<script type="text/javascript" src="res/layui/layui.js"></script>
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<style>
<!--
.morecake {
	width: 180px;
	height: 190px;
}
-->
</style>
</head>
<body id="list-cont">



	<script type="text/html" id="demo">
		<!-- 最顶部  -->
	<div class="site-nav-bg">
		<div class="site-nav w1200">
			<p class="sn-back-home">
				<i class="layui-icon layui-icon-home"></i> <a href="index.jsp">首页</a>
			</p>
			<div class="sn-quick-menu">
				<div class="login">
					<c:if test="${CURR_COM == null }">
						<a href="goConsumerLogin">登录</a>
					</c:if>
					<c:if test="${CURR_COM != null }">
						<a href="gopersoninfo"><c:out value="${CURR_COM}" /></a>  &nbsp; &nbsp; &nbsp;
						<a href="zhuxiao">注销</a>
					</c:if>
				</div>
				<div class="sp-cart">
					<a href="goshopcar">购物车</a><span><c:if
							test="${CURR_NUM == null }"></c:if> <c:if
							test="${CURR_NUM != null }">
							<c:out value="${CURR_NUM}" />
						</c:if></span>
				</div>
			</div>
		</div>
	</div>

	<!-- 头部 导航  -->
	<div class="header">
		<div class="headerLayout w1200">
			<div class="headerCon">
				<h1 class="mallLogo">
					<a href="index.jsp" title="皇室蛋糕"> <img
						src="images/img/logo1.png">
					</a>
				</h1>
				<div class="mallSearch">
					<form action="goSearchJsp" class="layui-form" novalidate>
						<input type="text" name="title" required lay-verify="required"
							autocomplete="off" class="layui-input" placeholder="请输入需要的商品">
						<button class="layui-btn" lay-submit lay-filter="formDemo">
							<i class="layui-icon layui-icon-search"></i>
						</button>
						<input type="hidden" name="" value="">
					</form>
				</div>
			</div>
		</div>
	</div>
				<!-- 更多推荐   模版引擎导入   class="active" 所有商品的样式-->
		
  <div class="content">
    <div class="main-nav">
      <div class="inner-cont0">
		<div class="inner-cont1 w1200">
          <div class="inner-cont2">
            <a href="commodity" >所有商品</a>
           <a href="gotusi">吐司和礼品</a>
            <a href="information.html">烘焙故事</a>
            <a href="aboutUs">关于我们</a>
          </div>
        </div>
      </div>
    </div>

				<div class="floors1">
					<div class="sk">
						<div class="sk_inner w1200">
							<div class="sk_bd">
				
								<div class="layui-carousel" id="test11" lay-filter="carofilter" style="font-size:larger">
									 <div carousel-item>
										<div class="item-box  layui-this" >
											<img src="images/img/l2.jpg">
										</div>
										<div class="item-box">
											<img src="images/img/l1.jpg">
										</div>
										<div class="item-box">
											<img src="images/img/l3.jpg">
										</div>
									</div>
								</div>
				
							</div>
						</div>
					</div>
				</div>




    <div class="floors">
		
      <div class="sk">
        <div class="sk_inner w1200">
          <div class="sk_hd">
            <a href="javascript:;">
              <img src="{{d.floor.bigimg}}">
            </a>
          </div>
          <div class="sk_bd">
            <div class="layui-carousel" id="test1">
               <div carousel-item>

                <div class="item-box">
			{{# for(var i = 0, len = d.floor.banner[0].count.length; i < len; i++){ }}
			  
                  <div class="item">
                    <a href="details?name={{d.floor.banner[0].count[i].title}}"><img src="{{d.floor.banner[0].count[i].img}}"></a>
                    <div class="title">{{d.floor.banner[0].count[i].title}}</div>
                    <div class="price">
                      <span>￥{{d.floor.banner[0].count[i].price}}</span>
                      <del>￥{{d.floor.banner[0].count[i].original}}</del>
                    </div>
                  </div>
			    
			{{# } }}
                </div>

                <div class="item-box">
				{{# for(var i = 0, len = d.floor.banner[1].count.length; i < len; i++){ }}
			  
                  <div class="item">
                    <a href="details?name={{d.floor.banner[1].count[i].title}}"><img src="{{d.floor.banner[1].count[i].img}}"></a>
                    <div class="title">{{d.floor.banner[1].count[i].title}}</div>
                    <div class="price">
                      <span>￥{{d.floor.banner[1].count[i].price}}</span>
                      <del>￥{{d.floor.banner[1].count[i].original}}</del>
                    </div>
                  </div>
			    
				{{# } }}
                </div>

              </div>
            </div>
          </div>
        </div>    
      </div>
		
    </div>

	<!--  热销推荐  无视了-->
<!-- 
    <div class="hot-recommend-con">
		
       <div class="hot-con1 w1200 layui-clear">
          <div class="item">
            <h4>{{d.hotCon.title}}</h4>
            <div class="big-img">
              <a href="javascript:;"><img src="{{d.hotCon.bigImg}}"></a>
            </div>

				{{# layui.each(d.hotCon.smallImg[0],function(index,item){}} 
            <div class="small-img">
              <a href="javascript:;"><img src="{{item.img}}" alt=""></a>
            </div>
          </div>
          <div class="item">
            <div class="top-img">
              <a href="javascript:;"><img src="res/static/img/hot5.jpg"></a>
            </div>
            <div class="bottom-img">
              <a href="javascript:;"><img src="res/static/img/hot6.jpg"></a>
              <a class="baby-cream" href="javascript:;"><img src="res/static/img/hot7.jpg"></a>
            </div>
          </div>
          <div class="item item1 margin0 padding0">
            <a href="javascript:;"><img src="res/static/img/hot8.jpg"></a>
            <a href="javascript:;"><img class="btm-img" src="res/static/img/hot9.jpg"></a>
          </div>
				{{# }); }}	
        </div>
    
    </div>    -->

    	<div class="product-cont w1200" id="product-cont">
				
			
  			<div class="product-item product-item1 layui-clear">
				<div class="left-title">
				  <h4><i>1F</i></h4>
				  <img src="res/static/img/icon_gou.png">
				  <h5>{{d.proct[0].text}}</h5>
				</div>
				<div class="right-cont">
				  <a href="javascript:;" class="top-img"><img src="images/img/l1.jpg" alt="" id="floorimgdemo1"></a>
				  <div class="img-box">
					{{# for(var j = 0, len = d.proct[0].imgBox.length; j < len; j++){ }}
				    <a href="details?name={{d.proct[0].imgBox[j].text}}"><img src="{{d.proct[0].imgBox[j].img}}"></a>
					 {{# } }}
				  </div>
				</div>
			</div>
  			<div class="product-item product-item2 layui-clear">
				<div class="left-title">
				  <h4><i>2F</i></h4>
				  <img src="res/static/img/icon_gou.png">
				  <h5>{{d.proct[1].text}}</h5>
				</div>
				<div class="right-cont">
				  <a href="javascript:;" class="top-img"><img src="images/img/l3.jpg" alt="" id="floorimgdemo2"></a>
				  <div class="img-box">
					{{# for(var j = 0, len = d.proct[0].imgBox.length; j < len; j++){ }}
				    <a href="details?name={{d.proct[1].imgBox[j].text}}"><img src="{{d.proct[1].imgBox[j].img}}"></a>
					 {{# } }}
				  </div>
				</div>
			</div>
  			<div class="product-item product-item3 layui-clear">
				<div class="left-title">
				  <h4><i>3F</i></h4>
				  <img src="res/static/img/icon_gou.png">
				  <h5>{{d.proct[2].text}}</h5>
				</div>
				<div class="right-cont">
				  <a href="javascript:;" class="top-img"><img src="images/img/7.jpg" alt="" id="floorimgdemo3"></a>
				  <div class="img-box">
					{{# for(var j = 0, len = d.proct[0].imgBox.length; j < len; j++){ }}
				    <a href="details?name={{d.proct[2].imgBox[j].text}}"><img src="{{d.proct[2].imgBox[j].img}}"></a>
					 {{# } }}
				  </div>
				</div>
			</div>
           


    	</div>
		
				   <div class="product-list-box" id="product-list-box">
				    <div class="product-list-cont w1200">
				      <h4>{{d.productList.title}}</h4>
				      <div class="product-item-box layui-clear">
							{{# for(var i = 0, len = d.productList.item.length; i < len; i++){ }}
				        <div class="list-item" >
				          <a href="details?name={{d.productList.item[i].text}}"><img src="{{d.productList.item[i].img}}" class="morecake"></a>
				          <p>{{d.productList.item[i].text}}</p>
				          <span>{{d.productList.item[i].price}}</span>
				        </div>
 							 {{# } }}
				      </div>
				    </div>
				  </div>
				</div>
            

  </div>
              
	  <!-- 底部 -->
  <div class="footer">
    <div class="ng-promise-box">
      <div class="ng-promise w1200">
        <p class="text">
          <a class="icon1" href="javascript:;">7天无理由退换货</a>
          <a class="icon2" href="javascript:;">满99元全场免邮</a>
          <a class="icon3" style="margin-right: 0" href="javascript:;">100%品质保证</a>
        </p>
      </div>
    </div>
    <div class="mod_help w1200">                                     
      <p>
        <a href="aboutUs">关于我们</a>
        <span>|</span>
        <a href="helpCenter">帮助中心</a>
        <span>|</span>
        <a href="afterService">售后服务</a>
        <span>|</span>
        <a href="javascript:;">客服资讯</a>
        <span>|</span>
        <a href="javascript:;">关于货源</a>
      </p>
      <p class="coty">皇室蛋糕版权所有 &copy; 2018-2020</p>
    </div>
  </div>

	</script>
	<%-- 	<jsp:include page="success.jsp"></jsp:include> --%>
	<script type="text/javascript">
		layui.config({
			base : 'res/static/js/util/' //你存放新模块的目录，注意，不是layui的模块目录
		}).use([ 'mm', 'carousel' ], function() {
			var carousel = layui.carousel, mm = layui.mm;
			var option = {
				elem : '#test1',
				width : '100%' //设置容器宽度
				,
				arrow : 'always',
				height : '298',
				indicator : 'none'
			}
			carousel.render(option);
			// 模版引擎导入
			var ins = carousel.render(option);
			var html = demo.innerHTML;
			var listCont = document.getElementById('list-cont');
			// console.log(layui.router("#/about.html"))
			mm.request({
				// url: 'res/json/index.json',
				url : 'getIndexJSON',
				success : function(res) {
					console.log(res)
					listCont.innerHTML = mm.renderHtml(html, res)
					ins.reload(option);
					console.log("hahahahha")
				},
				error : function(res) {
					console.log(res);
				}
			})

			
	layui.use('carousel', function () {
        var carousel = layui.carousel;
        //***************************建造实例
        var ins=carousel.render({
            elem: '#test11'
            , width: '500px'     //设置容器宽度
            , arrow: 'always'    //始终显示箭头，可选hover,none
            //,anim: 'updown'    //切换动画方式，可选fade,default
            , full: false        //全屏
            , autoplay: true     //自动切换
            , interval: 1000     //自动切换的时间间隔
            , index: 3           //初始化时item索引,默认时0
            , indicator:'inside' //指示器位置，可选outside,none
        });
        
        //**************************监听轮播切换事件
        carousel.on('change(carofilter)', function (obj) { //test1来源于对应HTML容器的 lay-filter="test1" 属性值
            console.log(obj.index);     //当前条目的索引
            console.log(obj.prevIndex); //上一个条目的索引
            console.log(obj.item);      //当前条目的元素对象
        });

        //****************************重置轮播
        //var ins = carousel.render(options);
        ins.reload({arrow:'hover'});//将arror从alway变成hover
    });
		});
	</script>
	<script>
</script>
</body>
</html>